<template>
  <div class="yo-scroll" @touchstart="panStart" @touchmove="panMove" @touchend="panEnd" @scroll="onScroll($event)">
    <div id="scrollcontent" class="mw-column-style" style="position:absolute;top:-1rem;" :style="{transform:`translateY(${downFreshDistance}rem)`}">
      <div class="mw-row-style" style="position:relative;width:3.75rem;height:1rem;">
        <img :src="cat_image" style="height:0.36rem;width:0.36rem;bottom:0.32rem;position: absolute;left:1.685rem;"></img>
        <div :class="{myanimation:isactive}"
             style="position: absolute;left:1.475rem;bottom:0.1rem;width:0.8rem;height:0.8rem;">
          <img :style="{bottom:cat_circle_bottom + 'rem'}" src="/static/cat_circle.png"
               style="left:0.36rem;position: absolute;width:0.08rem;height:0.08rem;"></img>
        </div>
      </div>
      <slot></slot>
      <div v-show="showview">
        <div  v-if="hasNext" class="mw-row-style"
             style="width:3.75rem;height:0.4rem;background-color:#ffffff">
          <img src="/static/cat_complete.png"
               style="margin-left:1.5rem;height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear alternate infinite; margin-right:0.1rem;"></img>
          <img src="/static/cat_down.png"
               style="height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear 0.2s alternate infinite; margin-right:0.1rem;"></img>
          <img src="/static/cat_refresh.png"
               style="height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear 0.4s alternate infinite; margin-right:0.1rem;"></img>
        </div>
        <div v-else class="mw-row-style mw-third-text-color"
             style="width:3.75rem;height:0.4rem;justify-content: center;align-items: flex-end;font-size:0.12rem">--  我是有底线的  --
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import utils from '../utils'
  export default {
    props: {
      hasNext: {
        type: Boolean,
        default: true
      },

      onRefresh: {
        type: Function,
        default: undefined,
        required: false
      },
      onGetmore: {
        type: Function,
        default: undefined,
        required: false
      },
      showview: {
        type: Boolean,
        default: false
      }

    },
    data() {
      return {
        cat_circle_bottom: 0.18,
        downFreshDistance: 0,
        startY:0,
        headHeight:1,
        cat_rotate: 0,
        transitiontime: 0,
        touchStart: 0,
        isactive: false,
        cat_image: "/static/cat_complete.png",
//        showbottom:2,
        canRefresh:true,
        status:0,//0:正常;1:下拉过程;2:下拉刷新中
        hasStart:false,
        hasEnd:true,

        showbottom:2,
        getmorestatus:0,
      }
    },
    mounted() {
      this.downFreshDistance = 0
    },
    methods: {
      panStart(e) {
        if (!this.hasStart  && this.hasEnd) {
          this.hasStart = true;
          this.touchStart = e.changedTouches[0].clientY;
          this.startY = this.downFreshDistance
        }
      },
      panMove(e) {
        if (this.hasStart  && this.hasEnd) {
          if (this.downFreshDistance <= 0 && e.changedTouches[0].clientY - this.touchStart < 0) {

          } else if (this.downFreshDistance >= 0 && this.downFreshDistance < 0.68 && e.changedTouches[0].clientY - this.touchStart > 0 && this.$el.scrollTop == 0) {
            e.preventDefault();
            console.log(this.$el.scrollTop)
            this.downFreshDistance = (e.changedTouches[0].clientY - this.touchStart) / this.GLOBAL.ratio
          } else if (this.downFreshDistance >= 0.68 && this.downFreshDistance < 1&& this.$el.scrollTop == 0) {
            e.preventDefault();
            this.downFreshDistance = (e.changedTouches[0].clientY - this.touchStart) / this.GLOBAL.ratio
            this.cat_circle_bottom = 0.18 - (0.18 * ((e.changedTouches[0].clientY - this.touchStart) / this.GLOBAL.ratio - 0.68) / 0.32)
            this.cat_image = "/static/cat_down.png"
          } else if (this.downFreshDistance >= 1&& this.$el.scrollTop == 0) {
            if ((e.changedTouches[0].clientY - this.touchStart) / this.GLOBAL.ratio < 1) {
              this.downFreshDistance = (e.changedTouches[0].clientY - this.touchStart) / this.GLOBAL.ratio
            }
            e.preventDefault();
            this.cat_image = "/static/cat_refresh.png"
          }
        } else {
          e.preventDefault();
        }

      },
      panEnd(e) {
        var that = this

        if (this.hasStart && this.hasEnd) {
          this.hasEnd = false;
          this.hasStart = false;
          if (this.downFreshDistance < 0) {
            this.hasEnd = true;
          } else if (this.downFreshDistance >= 0 && this.downFreshDistance < 0.68) {
            that.cat_image = "/static/cat_complete.png"
            that.cat_circle_bottom = 0.18
            that.downFreshDistance = 0
            this.hasEnd = true;
          } else if (this.downFreshDistance >= 0.68 && this.downFreshDistance < 1) {
            that.cat_image = "/static/cat_complete.png"
            that.cat_circle_bottom = 0.18
            that.downFreshDistance = 0
            this.hasEnd = true;
          } else if (this.downFreshDistance >= 1) {
            this.isactive = true
            this.downFreshDistance = 1
            that.cat_circle_bottom = 0
            that.onRefresh(that.refreshDone)
          }
        }
      },
      refreshDone() {
        var that = this
        this.isactive = false
        this.cat_image = "/static/cat_complete.png"
        this.cat_circle_bottom = 0.18
        setTimeout(function () {
          that.downFreshDistance = 0
          that.hasEnd = true;
        }, 500);
      },
      getMoreDone() {
        this.getmorestatus = 0

      },
      onScroll(e) {
        var that = this;
        if ((this.$el.scrollTop + this.$el.clientHeight)/ this.GLOBAL.ratio + 1.4 >= document.getElementById('scrollcontent').clientHeight/ this.GLOBAL.ratio) {
          if (this.getmorestatus == 0 && this.hasNext) {
            that.getmorestatus = 1
            that.onGetmore(that.getMoreDone)
          }
        }
        return
      },
    }
  }
</script>
<style>
  .yo-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    width:3.75rem;
    top: 0;
    bottom:0;
    /*background-color: #ddd*/
  }
  .yo-scroll::-webkit-scrollbar {
    display: none;
  }
  .yo-scroll .inner {
    width: 100%;
    transition-duration: 300ms;
  }
  .myanimation {
    animation: mymove 0.8s ease-in-out infinite;
  }

  @keyframes mymove {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(360deg)
    }

  }

  @keyframes firstanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.16rem
    }
  }

  @keyframes secondanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.4rem
    }
  }

  @keyframes thirdanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.4rem
    }
  }
</style>
